<template>

    <div id="login">

        <div class="loginToHome">
            <el-form
                    ref="form"
                    :model="form"
                    :rules="ruleForm"
                    status-icon
                    label-width="80px"
                    class="loginForm"
            >
                <h3 style="margin-bottom: 30px; margin-top: 20px">登陆</h3>
                <el-form-item
                        label="用户名"
                        prop="name"
                >
                    <el-input
                            type="text"
                            v-model="form.name"
                            auto-complete="off"
                            placeholder="请输入电话号码"
                    ></el-input>
                </el-form-item>
                <el-form-item
                        label="密码"
                        prop="password"
                >
                    <el-input
                            type="password"
                            v-model="form.password"
                            auto-complete="off"
                            placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code" style="position: relative">
                    <el-input
                            type="text"
                            v-model="form.code"
                            auto-complete="off"
                            placeholder="请输入验证码"
                            style="width: 150px; position: absolute; left: 0px;"
                    ></el-input>
                    <div @click="draw">
                        <v-sidentify id="imgCode" style="display: inline-block; position: absolute; left: 170px"
                                     :identifyCode="code"></v-sidentify>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="homeBut"
                            type="primary"
                            plain
                            @click="submit"

                    >登录
                    </el-button>
                    <el-button
                            class="loginBut"
                            type="primary"
                            plain
                            @click="resetForm()"
                    >重置
                    </el-button>
                </el-form-item>
            </el-form>
            <div @click="toRegister" class="reg" style="margin-top: 55px; position: relative; right: -340px">
                去注册
            </div>

        </div>

    </div>

</template>

<script>
    import {request} from '../../network/request'
    import Sidentify from "./SIdentify"

    export default {
        data() {
            return {

                form: {
                    name: '',
                    password: '',
                    code: ''
                },
                ruleForm: {
                    name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                },
                code: ""
            }

        },
        methods: {
            toRegister() {
                this.$router.replace("/register");
            },
            submit() {
                this.form.code = this.form.code.toLocaleLowerCase();
                this.code = this.code.toLocaleLowerCase();
                if (this.form.code == this.code) {
                    this.$message({
                        message: '登陆中请稍后',
                        type: 'info'
                    });
                    var data;
                    request({
                        url: "/checkUser",
                        method: "post",
                        params: {
                            phoneNumber: this.form.name,
                            passWord:this.form.password
                        }
                    }).then(res => {

                        //console.log(res);
                        data = res.data;
                        console.log(data);
                        if (res.data != false) {
                            var nickName = data.nickName;
                            var passWord = data.passWord;
                            var phoneNumber = data.phoneNumber;
                            var imgUrl = data.imgUrl;
                            var id = data.id;
                            console.log(passWord);
                            console.log(this.form.password);

                            // console.log(id);
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            this.$cookies.set("phoneNumber", phoneNumber);
                            this.$cookies.set("passWord", passWord);
                            sessionStorage.setItem('nickName', nickName);
                            sessionStorage.setItem('passWord', passWord);
                            sessionStorage.setItem('phoneNumber', phoneNumber);
                            sessionStorage.setItem('imgUrl', imgUrl);
                            sessionStorage.setItem('userId', id);
                            sessionStorage.setItem('vip', data.vip);
                            sessionStorage.setItem('surplus', data.surplus);

                            this.$store.state.nickName = nickName;
                            this.$store.state.passWord = passWord;
                            this.$store.state.phoneNumber = phoneNumber;
                            this.$store.state.imgUrl = imgUrl;


                            this.$router.replace("/home");

                        } else {
                            this.$message.error('用户名或者密码错误');
                        }
                    }).catch(err => {
                        console.log(err);
                    });


                } else {
                    var btn = document.getElementById("imgCode");
                    this.draw();
                    btn.setAttribute('identifyCode', this.code);
                    this.$message.error('验证码错误');
                }
            },
            resetForm() {
                this.$refs.form.resetFields();
            },
            draw() {

                var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var ans = "";
                for (var i = 0; i <= 3; i++) {
                    var t = Math.floor(Math.random() * 10);
                    while (sCode[t] == ",") {
                        var t = Math.floor(Math.random() * 100);
                    }

                    ans += sCode[t];
                }
                this.code = ans;
            }

        },
        components: {
            'v-sidentify': Sidentify
        },
        created() {
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var ans = "";
            for (var i = 0; i <= 3; i++) {
                var t = Math.floor(Math.random() * 10);
                while (sCode[t] == ",") {
                    var t = Math.floor(Math.random() * 100);
                }

                ans += sCode[t];
            }
            this.code = ans;

        }
    }

</script>

<style scoped>
    .loginToHome {
        position: absolute;
        left: 0px;
        right: 0;
        top: -100px;
        bottom: 0;
        margin: auto;
        width: 400px;
        height: 350px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 2px 2px 3px #dcdfe6;
    }

    .loginForm {
        text-align: center;
        padding-top: 15px;
        padding-right: 30px;
        top: 10px;
    }

    .homeBut {
        position: absolute;
        left: 0px;
    }

    .loginBut {
        position: absolute;
        right: 0px;
    }

    .reg {
        cursor: pointer;
        color: #8f9eff;

    }

    .reg:hover {
        color: #409EFF;
    }
</style>